<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/layui/layui.all.js"></script>
    <script src="../js/commone.js"></script>
    <link rel="stylesheet" href="../js/layui/css/layui.css"/>
    <style>
        .layui-admin-card-header {
            padding: 15px;
        }

        .layui-admin-card-body {
            height: 100%;
        }
    </style>
</head>
<body class="layui-layout-body" style="">
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layui-admin-card-header">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input id="username" class="layui-input" type="text" placeholder="请输入" autocomplete="off"/>
                    </div>
                </div>
                <button class="layui-btn" data-type="reload" id="user_filter">搜索</button>
                <button class="layui-btn" data-type="reload" id="user_add">新增</button>
            </div>
        </div>
        <div class="layui-card-body layui-admin-card-body">
            <table id="datatable" lay-filter="userlist" style="float: left;"></table>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
    </div>
</script>
<script type="text/javascript" th:inline="none">
    layui.use(['element', 'layer', 'form', 'table'], function () {
        var element = layui.element
            , layer = layui.layer
            , form = layui.form
            , table = layui.table
            , $ = layui.jquery;
        var width = 0;
        //第一个实例
        var tablelist = table.render({
                elem: '#datatable',
                id: 'usertable',
                height: '550',
                url: '/user/getPage', //数据接口,
                page: true,
                cols: [[
                    {field: 'userId', title: 'ID', width: 80, sort: true, fixed: 'left'},
                    {field: 'userName', title: '用户名', width: 100},
                    {field: 'userAccount', title: '账户名', width: 100, sort: true},
                    {field: 'activity', title: '状态', width: 80, sort: true},
                    {field: 'createAccount', title: '创建用户', width: 80, sort: true},
                    {
                        field: 'createTimestamp', title: '创建时间', width: 190, sort: true,
                        templet: function (d) {
                            return new Date(d.createTimestamp).toLocaleDateString() + " " + new Date(d.createTimestamp).toLocaleTimeString();
                        }
                    },
                    {
                        field: 'lastLoginTimestamp', title: '最后登录时间', width: 190, sort: true,
                        templet: function (d) {
                            return new Date(d.lastLoginTimestamp).toLocaleDateString() + " " + new Date(d.lastLoginTimestamp).toLocaleTimeString();
                        }
                    },
                    {title: '操作', width: 180, fixed: 'right', toolbar: '#toolbarDemo'}
                ]],
                // initSort: {
                //     field: 'userId' //排序字段，对应 cols 设定的各字段名
                //     , type: 'desc'
                // }
            })
        ;
        active = {
            reload: function () {
                //执行重载
                table.reload('usertable', {
                    page: {curr: 1}
                    , where: {
                        userName: $('#username').val()
                    }
                });
            }
        };
        //监听事件
        $('#user_filter').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        // table.on('sort(userlist)', function (obj) {
        //     table.reload('usertable', {
        //         where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
        //             field: obj.field //排序字段
        //             , order: obj.type //排序方式
        //         }
        //     });
        // });
        table.on('tool(userlist)', function (obj) {
            switch (obj.event) {
                case 'delete':
                    layer.confirm('是否删除' + obj.data.userName, {
                        shade: 0,
                        btn: ['删除', '取消']
                    }, function (index, layero) {
                        $.post("./user/delete/" + obj.data.userId, function (data) {
                            if (data.success) {
                                reloadTable();
                                layer.msg('删除成功');
                            } else {
                                layer.msg('删除失败');
                            }
                        });
                    });
                case 'update':
                    layer.open({
                        type: 2,
                        area: ['500px', '500px'],
                        fixed: true, //不固定
                        maxmin: true,
                        shade: 0,
                        offset: 't',
                        content: ['/user/initEditPage?id=' + obj.data.userId, 'no'],
                    });
            }
        });
        $('#user_add').on('click', function () {
            layer.open({
                type: 2,
                shade: 0,
                area: ['500px', '500px'],
                offset: 't',
                fixed: true, //不固定
                maxmin: true,
                content: ['/user/initEditPage', 'no'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            });
        });
    });
</script>
</body>
</html>
